<template>
  <div class="overflow-x-auto my-6">
    <table class="min-w-full border border-gray-200 rounded-lg">
      <thead>
        <tr class="bg-gray-50">
          <th v-for="(header, index) in table.headers" :key="index" class="py-3 px-4 border-b text-left text-sm font-semibold text-gray-700">
            {{ header }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in table.rows" :key="rowIndex" :class="rowIndex % 2 === 1 ? 'bg-gray-50' : ''">
          <td v-for="(cell, cellIndex) in row" :key="cellIndex" class="py-3 px-4 border-b text-sm">
            {{ cell }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'TableBlock',
  props: {
    table: {
      type: Object,
      required: true,
      validator: (value) => {
        return value.headers && Array.isArray(value.headers) && value.rows && Array.isArray(value.rows);
      }
    }
  }
};
</script>

<style scoped>
/* 组件样式可以在这里添加 */
</style>